<script lang="ts" setup>
import type { FileDatabase, SearchForm } from './types';

import { nextTick, reactive, ref } from 'vue';

import { VIcon } from '@croco/framework/icons';
import { fileIcon, sizeFormat } from '@croco/framework/utils';

import { ElMessage } from 'element-plus';

import { service } from '#/api/request';
import { DataTable } from '#/components/data-table';

const database = ref<FileDatabase>();
const dataTableRef = ref<InstanceType<typeof DataTable>>();
const visible = ref(false);
const height = ref(window.innerHeight * 0.65);
const params = reactive<SearchForm>({
    id: '',
    currentFolderId: '',
    name: '',
});

function close() {
    visible.value = false;
}
function onEnter({ row }: any) {
    params.name = '';
    params.currentFolderId = row.id;
    dataTableRef.value?.refresh();
}

function onBack() {
    params.name = '';
    params.currentFolderId = '';
    dataTableRef.value?.refresh();
}

function onDelete(rows: any[]) {
    const type = rows[0].extension;
    const ids = rows.map((item) => item.id);
    if (type === 'folder' && ids.includes(database.value?.currentFolderId)) {
        ElMessage.warning(ids.length === 1 ? '所选目录正在使用中不能进行删除操作' : '所选目录中包含正在使用的目录不能进行删除操作');
    } else {
        service.confirm({
            message: `确定对所选记录进行${ids.length === 1 ? '删除' : '批量删除'}操作,删除后无法恢复文件?`,
            url: `/system/file/${type === 'folder' ? 'folder' : 'file'}`,
            data: { id: ids },
            success: dataTableRef.value?.refresh,
        });
    }
}

// 展示弹窗
const open = (row: any) => {
    if (row) {
        params.id = row.id;
        params.currentFolderId = '';
        database.value = row;
    }
    nextTick(() => (visible.value = true));
};

defineExpose({ open });
</script>

<template>
    <el-dialog v-model="visible" title="文件库" width="70%" :before-close="close" :close-on-click-modal="false" @opened="dataTableRef?.refresh()" align-center draggable>
        <DataTable ref="dataTableRef" :params="params" api="/system/file/files" :height="height" selection lazy>
            <template #extra>
                <div class="is-align-center flex">
                    <el-button link :disabled="!params.currentFolderId" @click="onBack()">
                        <template #icon>
                            <el-icon>
                                <VIcon icon="icon:back" />
                            </el-icon>
                        </template>
                        返回上一级
                    </el-button>
                    <el-divider direction="vertical" />
                    <div class="header-search">
                        <el-form-item v-show="false">
                            <el-input v-model="params.id" />
                        </el-form-item>
                        <el-form-item v-show="false">
                            <el-input v-model="params.currentFolderId" />
                        </el-form-item>
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="params.name" clearable />
                        </el-form-item>
                    </div>
                </div>
            </template>
            <template #custom-button="{ selections }">
                <el-button v-auth="'system:file:remove'" @click="onDelete(selections)" type="danger" style="width: var(--el-component-size); height: var(--el-component-size)">
                    <template #icon>
                        <VIcon icon="icon:delete" />
                    </template>
                </el-button>
            </template>
            <template #default>
                <el-table-column align="center" width="50" fixed>
                    <template #default="scope">
                        <el-image :src="fileIcon(scope.row.extension)" style="position: relative; float: left; width: 1.8em; height: 1.8em" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" align="left" :min-width="250" show-overflow-tooltip sortable fixed>
                    <template #default="scope">
                        <el-badge :is-dot="scope.row.id === database?.currentFolderId" :offset="[10, 5]" type="success">
                            <el-link v-if="scope.row.extension !== 'folder'" :underline="false" type="primary" style="text-decoration: none">
                                {{ scope.row.name }}
                            </el-link>
                            <el-link v-else :underline="false" type="primary" style="text-decoration: none" @click="onEnter(scope)">
                                {{ scope.row.name }}
                            </el-link>
                        </el-badge>
                    </template>
                </el-table-column>
                <el-table-column prop="changeTime" label="修改日期" width="180" align="left" sortable>
                    <template #default="scope">
                        {{ scope.row.changeTime?.substring(0, 16) }}
                    </template>
                </el-table-column>
                <el-table-column prop="extension" label="类型" width="150" align="left">
                    <template #default="scope">
                        {{ scope.row.extension === 'folder' ? '文件夹' : scope.row.extension }}
                    </template>
                </el-table-column>
                <el-table-column prop="size" label="大小" width="150" align="right" header-align="center">
                    <template #default="scope">
                        {{ scope.row.extension === 'folder' ? '' : sizeFormat(scope.row.size) }}
                    </template>
                </el-table-column>
                <el-table-column prop="scope" label="操作" width="80" align="center" header-align="center">
                    <template #default="scope">
                        <el-button v-auth="'system:file:remove'" @click="onDelete([scope.row])" link type="danger" />
                    </template>
                </el-table-column>
            </template>
        </DataTable>
    </el-dialog>
</template>
<style lang="scss" scoped>
.header-search {
    display: flex;
    .el-form-item {
        margin-bottom: 0;
    }
}
</style>
